<!-- ion slider Nice -->
<link href="css/ionslider/ion.rangeSlider.skinNice.css" rel="stylesheet" type="text/css" />
<!-- bootstrap slider -->
<link href="css/bootstrap-slider/slider.css" rel="stylesheet" type="text/css" />

<ol class="breadcrumb newcrumb">
    <li>
        <a href="#">
            <span><i class="fa fontello-home-outline"></i>
            </span>Home</a>
    </li>
    <li class="active">Slider</li>
</ol>
<!-- Small boxes (Stat box) -->
<div class="row">

    <div class="col-xs-12">
        <div class="box box-primary">
            <div class="box-header">
                <h3 class="box-title">Ion Slider</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="row margin">
                    <div class="col-sm-6">
                        <span class="irs irs-with-grid" id="irs-1">
                            <span class="irs">
                                <span class="irs-line">
                                    <span class="irs-line-left"></span>
                                    <span class="irs-line-mid"></span>
                                    <span class="irs-line-right"></span>
                                </span>
                                <span class="irs-min" style="display: block;">$0</span>
                                <span class="irs-max" style="display: block;">$5000</span>
                                <span class="irs-from" style="left: 89.5px; display: block;">$1000</span>
                                <span class="irs-to" style="left: 375.5px; display: block;">$4000</span>
                                <span class="irs-single" style="left: 214px; display: none;">$1000 — $4000</span>
                                <span class="irs-diapason" style="left: 106.60000000000001px; width: 286.8px;"></span>
                                <span class="irs-slider from" style="left: 96px;"></span>
                                <span class="irs-slider to" style="left: 382px;"></span>
                            </span>
                            <span class="irs-grid">
                                <span class="irs-grid-pol small" style="left: 0px;"></span>
                                <span class="irs-grid-pol small" style="left: 25px;"></span>
                                <span class="irs-grid-pol small" style="left: 50px;"></span>
                                <span class="irs-grid-pol small" style="left: 75px;"></span>
                                <span class="irs-grid-pol small" style="left: 100px;"></span>
                                <span class="irs-grid-pol small" style="left: 125px;"></span>
                                <span class="irs-grid-pol small" style="left: 150px;"></span>
                                <span class="irs-grid-pol small" style="left: 175px;"></span>
                                <span class="irs-grid-pol small" style="left: 200px;"></span>
                                <span class="irs-grid-pol small" style="left: 225px;"></span>
                                <span class="irs-grid-pol small" style="left: 250px;"></span>
                                <span class="irs-grid-pol small" style="left: 275px;"></span>
                                <span class="irs-grid-pol small" style="left: 300px;"></span>
                                <span class="irs-grid-pol small" style="left: 325px;"></span>
                                <span class="irs-grid-pol small" style="left: 350px;"></span>
                                <span class="irs-grid-pol small" style="left: 375px;"></span>
                                <span class="irs-grid-pol small" style="left: 400px;"></span>
                                <span class="irs-grid-pol small" style="left: 425px;"></span>
                                <span class="irs-grid-pol small" style="left: 450px;"></span>
                                <span class="irs-grid-pol small" style="left: 475px;"></span>
                                <span class="irs-grid-pol small" style="left: 499px;"></span>
                                <span class="irs-grid-pol" style="left: 0px;"></span>
                                <span class="irs-grid-text" style="left: 0px; text-align: left;">0</span>
                                <span class="irs-grid-pol" style="left: 125px;"></span>
                                <span class="irs-grid-text" style="left: 75px;">1250</span>
                                <span class="irs-grid-pol" style="left: 250px;"></span>
                                <span class="irs-grid-text" style="left: 200px;">2500</span>
                                <span class="irs-grid-pol" style="left: 375px;"></span>
                                <span class="irs-grid-text" style="left: 325px;">3750</span>
                                <span class="irs-grid-pol" style="left: 499px;"></span>
                                <span class="irs-grid-text" style="left: 399px; text-align: right;">5000</span>
                            </span>
                        </span>
                        <input id="range_1" type="text" name="range_1" value="1000;4000" style="display: none;">
                    </div>

                    <div class="col-sm-6">
                        <span class="irs irs-with-grid" id="irs-2">
                            <span class="irs">
                                <span class="irs-line">
                                    <span class="irs-line-left"></span>
                                    <span class="irs-line-mid"></span>
                                    <span class="irs-line-right"></span>
                                </span>
                                <span class="irs-min" style="display: block;">1 000 €</span>
                                <span class="irs-max" style="display: none;">100 000 €</span>
                                <span class="irs-from" style="left: 129px; display: block;">30 000 €</span>
                                <span class="irs-to" style="left: 419px; display: block;">90 000 €</span>
                                <span class="irs-single" style="left: 254.5px; display: none;">30 000 — 90 000 €</span>
                                <span class="irs-diapason" style="left: 151.02020202020202px; width: 289.6969696969697px;"></span>
                                <span class="irs-slider from" style="left: 140px;"></span>
                                <span class="irs-slider to" style="left: 430px;"></span>
                            </span>
                            <span class="irs-grid">
                                <span class="irs-grid-pol small" style="left: 0px;"></span>
                                <span class="irs-grid-pol small" style="left: 25px;"></span>
                                <span class="irs-grid-pol small" style="left: 50px;"></span>
                                <span class="irs-grid-pol small" style="left: 75px;"></span>
                                <span class="irs-grid-pol small" style="left: 100px;"></span>
                                <span class="irs-grid-pol small" style="left: 125px;"></span>
                                <span class="irs-grid-pol small" style="left: 150px;"></span>
                                <span class="irs-grid-pol small" style="left: 175px;"></span>
                                <span class="irs-grid-pol small" style="left: 200px;"></span>
                                <span class="irs-grid-pol small" style="left: 225px;"></span>
                                <span class="irs-grid-pol small" style="left: 250px;"></span>
                                <span class="irs-grid-pol small" style="left: 275px;"></span>
                                <span class="irs-grid-pol small" style="left: 300px;"></span>
                                <span class="irs-grid-pol small" style="left: 325px;"></span>
                                <span class="irs-grid-pol small" style="left: 350px;"></span>
                                <span class="irs-grid-pol small" style="left: 375px;"></span>
                                <span class="irs-grid-pol small" style="left: 400px;"></span>
                                <span class="irs-grid-pol small" style="left: 425px;"></span>
                                <span class="irs-grid-pol small" style="left: 450px;"></span>
                                <span class="irs-grid-pol small" style="left: 475px;"></span>
                                <span class="irs-grid-pol small" style="left: 499px;"></span>
                                <span class="irs-grid-pol" style="left: 0px;"></span>
                                <span class="irs-grid-text" style="left: 0px; text-align: left;">1 000</span>
                                <span class="irs-grid-pol" style="left: 125px;"></span>
                                <span class="irs-grid-text" style="left: 75px;">26 000</span>
                                <span class="irs-grid-pol" style="left: 250px;"></span>
                                <span class="irs-grid-text" style="left: 200px;">50 500</span>
                                <span class="irs-grid-pol" style="left: 375px;"></span>
                                <span class="irs-grid-text" style="left: 325px;">75 500</span>
                                <span class="irs-grid-pol" style="left: 499px;"></span>
                                <span class="irs-grid-text" style="left: 399px; text-align: right;">100 000</span>
                            </span>
                        </span>
                        <input id="range_2" type="text" name="range_2" value="30000;90000" data-type="double" data-step="500" data-postfix=" €" data-from="30000" data-to="90000" data-hasgrid="true" style="display: none;">
                    </div>
                </div>
                <div class="row margin">
                    <div class="col-sm-6">
                        <span class="irs irs-with-grid" id="irs-3">
                            <span class="irs">
                                <span class="irs-line">
                                    <span class="irs-line-left"></span>
                                    <span class="irs-line-mid"></span>
                                    <span class="irs-line-right"></span>
                                </span>
                                <span class="irs-min" style="display: none;">0 mm</span>
                                <span class="irs-max" style="display: block;">10 mm</span>
                                <span class="irs-from" style="display: none;">0</span>
                                <span class="irs-to" style="display: none;">0</span>
                                <span class="irs-single" style="left: 0px;">0 mm</span>
                                <span class="irs-slider single" style="left: 0px;"></span>
                            </span>
                            <span class="irs-grid">
                                <span class="irs-grid-pol small" style="left: 0px;"></span>
                                <span class="irs-grid-pol small" style="left: 25px;"></span>
                                <span class="irs-grid-pol small" style="left: 50px;"></span>
                                <span class="irs-grid-pol small" style="left: 75px;"></span>
                                <span class="irs-grid-pol small" style="left: 100px;"></span>
                                <span class="irs-grid-pol small" style="left: 125px;"></span>
                                <span class="irs-grid-pol small" style="left: 150px;"></span>
                                <span class="irs-grid-pol small" style="left: 175px;"></span>
                                <span class="irs-grid-pol small" style="left: 200px;"></span>
                                <span class="irs-grid-pol small" style="left: 225px;"></span>
                                <span class="irs-grid-pol small" style="left: 250px;"></span>
                                <span class="irs-grid-pol small" style="left: 275px;"></span>
                                <span class="irs-grid-pol small" style="left: 300px;"></span>
                                <span class="irs-grid-pol small" style="left: 325px;"></span>
                                <span class="irs-grid-pol small" style="left: 350px;"></span>
                                <span class="irs-grid-pol small" style="left: 375px;"></span>
                                <span class="irs-grid-pol small" style="left: 400px;"></span>
                                <span class="irs-grid-pol small" style="left: 425px;"></span>
                                <span class="irs-grid-pol small" style="left: 450px;"></span>
                                <span class="irs-grid-pol small" style="left: 475px;"></span>
                                <span class="irs-grid-pol small" style="left: 499px;"></span>
                                <span class="irs-grid-pol" style="left: 0px;"></span>
                                <span class="irs-grid-text" style="left: 0px; text-align: left;">0</span>
                                <span class="irs-grid-pol" style="left: 125px;"></span>
                                <span class="irs-grid-text" style="left: 75px;">2.5</span>
                                <span class="irs-grid-pol" style="left: 250px;"></span>
                                <span class="irs-grid-text" style="left: 200px;">5</span>
                                <span class="irs-grid-pol" style="left: 375px;"></span>
                                <span class="irs-grid-text" style="left: 325px;">7.5</span>
                                <span class="irs-grid-pol" style="left: 499px;"></span>
                                <span class="irs-grid-text" style="left: 399px; text-align: right;">10</span>
                            </span>
                        </span>
                        <input id="range_5" type="text" name="range_5" value="0" style="display: none;">
                    </div>
                    <div class="col-sm-6">
                        <span class="irs irs-with-grid" id="irs-4">
                            <span class="irs">
                                <span class="irs-line">
                                    <span class="irs-line-left"></span>
                                    <span class="irs-line-mid"></span>
                                    <span class="irs-line-right"></span>
                                </span>
                                <span class="irs-min" style="display: block;">-50°</span>
                                <span class="irs-max" style="display: block;">50°</span>
                                <span class="irs-from" style="display: none;">0</span>
                                <span class="irs-to" style="display: none;">0</span>
                                <span class="irs-single" style="left: 241px;">0°</span>
                                <span class="irs-slider single" style="left: 239px;"></span>
                            </span>
                            <span class="irs-grid">
                                <span class="irs-grid-pol small" style="left: 0px;"></span>
                                <span class="irs-grid-pol small" style="left: 25px;"></span>
                                <span class="irs-grid-pol small" style="left: 50px;"></span>
                                <span class="irs-grid-pol small" style="left: 75px;"></span>
                                <span class="irs-grid-pol small" style="left: 100px;"></span>
                                <span class="irs-grid-pol small" style="left: 125px;"></span>
                                <span class="irs-grid-pol small" style="left: 150px;"></span>
                                <span class="irs-grid-pol small" style="left: 175px;"></span>
                                <span class="irs-grid-pol small" style="left: 200px;"></span>
                                <span class="irs-grid-pol small" style="left: 225px;"></span>
                                <span class="irs-grid-pol small" style="left: 250px;"></span>
                                <span class="irs-grid-pol small" style="left: 275px;"></span>
                                <span class="irs-grid-pol small" style="left: 300px;"></span>
                                <span class="irs-grid-pol small" style="left: 325px;"></span>
                                <span class="irs-grid-pol small" style="left: 350px;"></span>
                                <span class="irs-grid-pol small" style="left: 375px;"></span>
                                <span class="irs-grid-pol small" style="left: 400px;"></span>
                                <span class="irs-grid-pol small" style="left: 425px;"></span>
                                <span class="irs-grid-pol small" style="left: 450px;"></span>
                                <span class="irs-grid-pol small" style="left: 475px;"></span>
                                <span class="irs-grid-pol small" style="left: 499px;"></span>
                                <span class="irs-grid-pol" style="left: 0px;"></span>
                                <span class="irs-grid-text" style="left: 0px; text-align: left;">-50</span>
                                <span class="irs-grid-pol" style="left: 125px;"></span>
                                <span class="irs-grid-text" style="left: 75px;">-25</span>
                                <span class="irs-grid-pol" style="left: 250px;"></span>
                                <span class="irs-grid-text" style="left: 200px;">0</span>
                                <span class="irs-grid-pol" style="left: 375px;"></span>
                                <span class="irs-grid-text" style="left: 325px;">25</span>
                                <span class="irs-grid-pol" style="left: 499px;"></span>
                                <span class="irs-grid-text" style="left: 399px; text-align: right;">50</span>
                            </span>
                        </span>
                        <input id="range_6" type="text" name="range_6" value="0" style="display: none;">
                    </div>
                </div>
                <div class="row margin">
                    <div class="col-sm-12">
                        <span class="irs" id="irs-5">
                            <span class="irs">
                                <span class="irs-line">
                                    <span class="irs-line-left"></span>
                                    <span class="irs-line-mid"></span>
                                    <span class="irs-line-right"></span>
                                </span>
                                <span class="irs-min" style="display: none;">0</span>
                                <span class="irs-max" style="display: none;">1</span>
                                <span class="irs-from" style="display: none;">0</span>
                                <span class="irs-to" style="display: none;">0</span>
                                <span class="irs-single" style="left: 474.5px;">55 000 light years</span>
                                <span class="irs-slider single" style="left: 504px;"></span>
                            </span>
                            <span class="irs-grid"></span>
                        </span>
                        <input id="range_4" type="text" name="range_4" value="55000" style="display: none;">
                    </div>
                </div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>

    <!-- ./col -->

</div>
<div class="row">
    <div class="col-xs-12">
        <div class="box box-primary">
            <div class="box-header">
                <h3 class="box-title">Bootstrap Slider</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="row margin">
                    <div class="col-sm-12">
                        <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="red">
                        <p>data-slider-id="red"</p>
                        <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="blue">
                        <p>data-slider-id="blue"</p>
                        <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="green">
                        <p>data-slider-id="green"</p>
                        <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="yellow">
                        <p>data-slider-id="yellow"</p>
                        <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="aqua">
                        <p>data-slider-id="aqua"</p>
                        <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="purple">
                        <p style="margin-top: 10px">data-slider-id="purple"</p>
                        <div class="text-center">
                            <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="red">
                            <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="blue">
                            <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="green">
                            <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="yellow">
                            <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="aqua">
                            <input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200" data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical" data-slider-selection="before" data-slider-tooltip="show" data-slider-id="purple">
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
    <!-- /.col -->
</div>
<!-- /.row -->
<!-- /.row -->

    <!-- Ion Slider -->
        <script src="js/plugins/ionslider/ion.rangeSlider.min.js" type="text/javascript"></script>

        <!-- Bootstrap slider -->
        <script src="js/plugins/bootstrap-slider/bootstrap-slider.js" type="text/javascript"></script>

<script type="text/javascript">
/* BOOTSTRAP SLIDER */
$('.slider').slider();

/* ION SLIDER */
$("#range_1").ionRangeSlider({
    min: 0,
    max: 5000,
    from: 1000,
    to: 4000,
    type: 'double',
    step: 1,
    prefix: "$",
    prettify: false,
    hasGrid: true
});
$("#range_2").ionRangeSlider();

$("#range_5").ionRangeSlider({
    min: 0,
    max: 10,
    type: 'single',
    step: 0.1,
    postfix: " mm",
    prettify: false,
    hasGrid: true
});
$("#range_6").ionRangeSlider({
    min: -50,
    max: 50,
    from: 0,
    type: 'single',
    step: 1,
    postfix: "°",
    prettify: false,
    hasGrid: true
});

$("#range_4").ionRangeSlider({
    type: "single",
    step: 100,
    postfix: " light years",
    from: 55000,
    hideMinMax: true,
    hideFromTo: false
});
$("#range_3").ionRangeSlider({
    type: "double",
    postfix: " miles",
    step: 10000,
    from: 25000000,
    to: 35000000,
    onChange: function(obj) {
        var t = "";
        for (var prop in obj) {
            t += prop + ": " + obj[prop] + "\r\n";
        }
        $("#result").html(t);
    },
    onLoad: function(obj) {
        //
    }
});
</script>
